import React from 'react';
import {
  View,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
} from 'react-native';

import {Button} from 'react-native-elements';
import dismissKeyboard from 'dismissKeyboard';

import Config from '../../config';
import BasePage from '../common/BasePage';
import TImage from '../../components/TImage';
import Constants from '../../common/Constants';
import CommonStyles from '../../common/CommonStyles';
import ImageConstants from '../../common/ImageConstants';
import SizeUtils from '../../common/SizeUtils';
import LoginSendAction from '../../actions/login/LoginSendAction';

export default class LoginPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.pageName = "LoginPage";
    this.state.loadComplete = false;
    this.state.viewStatus = 1;
    this.state.eyeOpened = false;
    this.state.phoneNum = "";
    this.state.password = "";
    this.state.status = 0;

    this._width = SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2);
  }

  shouldComponentUpdate(nextProps, nextState) {
    // console.log("shouldComponentUpdate", nextProps, nextState);
    this._checkGetAutorizationInShouldUpdate(nextProps, nextState);
    return true;
  }

  render() {
    return (
      <TouchableOpacity activeOpacity={1} style={{flex:1, backgroundColor:"#ffffff",
      paddingTop:Config.paddingTop,
          marginLeft:SizeUtils.translateDesignWidthToCode(54),
          marginRight:SizeUtils.translateDesignWidthToCode(54),
         flexDirection:"column", alignItems:"center"}} onPress={() => dismissKeyboard()}>
        <TImage source={require("../../../resource/images/login/logo.png")}
          style={{marginTop:SizeUtils.translateDesignHeightToCode(140), width:178, height:178}} />
        {this._renderPhoneText()}
        {this._renderPasswordText()}
        {this._renderRegisterNForgetPasswordText()}
        {this._renderButtons()}
        {this._renderPasser()}
      </TouchableOpacity>
    )
  }


  _dealEnterPage() {
    this.setState({
      viewStatus:1,
    })
  }

  _dealLeavePage() {
    console.log("leave loginPage");
  }

  _renderPhoneText() {
    return (
      <View style={{
            height:SizeUtils.translateDesignHeightToCode(64),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#eeeeee",
            marginTop:SizeUtils.translateDesignHeightToCode(100),
          }}>
        <TextInput
          style={{
            padding:0,
            width:this._width,
            height:SizeUtils.translateDesignHeightToCode(54),
            borderWidth: 0,
            textAlignVertical: "top",
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {(phoneNum) => this.setState({phoneNum})}
          placeholder = "手机号"
          multiline = {false}
          underlineColorAndroid="transparent"
          maxLength={11}
          keyboardType="numeric"
          keyboardAppearance="dark"
          value = {this.state.phoneNum}
        />
      </View>
    )
  }

  _renderPasswordText() {
    return (
      <View style={{
            width:this._width,
            height:SizeUtils.translateDesignHeightToCode(64),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#eeeeee",
            marginTop:SizeUtils.translateDesignHeightToCode(74),
            flexDirection:"row", justifyContent:"space-between",
          }}>
        <TextInput
          style={{
            padding:0,
            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 2 + 100),
            height:SizeUtils.translateDesignHeightToCode(54),
            borderWidth: 0,
            textAlignVertical: "top",
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {(password) => this.setState({password})}
          placeholder = "请输入密码"
          multiline = {false}
          underlineColorAndroid="transparent"
          maxLength={16}
          value = {this.state.password}
          secureTextEntry = {!this.state.eyeOpened}
        />
        <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(100),
          height:SizeUtils.translateDesignWidthToCode(64), justifyContent:"center", alignItems:"center"}}
            onPress={this._onPressEye.bind(this)}>
          <Image source={this.state.eyeOpened ? require("../../../resource/images/common/eye1.png") : require('../../../resource/images/common/eye.png')}
              style={{width:SizeUtils.translateDesignWidthToCode(33),
            height:SizeUtils.translateDesignWidthToCode(25),}}/>
        </TouchableOpacity>
      </View>
    )
  }

  _onPressEye() {
    this.setState({
      eyeOpened:!this.state.eyeOpened,
    })
  }

  _renderRegisterNForgetPasswordText() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(54),
          width:this._width,
          flexDirection:"row", justifyContent:"space-between"}}>
        <TouchableOpacity style={{}}
            onPress={this._onPressRegister.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28),color:"#484a56"}}>
            免费注册
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={{}}
            onPress={this._onPressForget.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28),color:"#484a56"}}>
            忘记密码
          </Text>
        </TouchableOpacity>
      </View>
    )
  }

  _onPressRegister() {
    this.gotoPage(Config.pages.login_register);
  }

  _onPressForget() {
    this.gotoPage(Config.pages.user_forgetpwd);
  }

  _renderButtons() {
    return(
      <View style={{flexDirection:"column",
          width:this._width,}}>
        <Text style={{color:"#999999", fontSize: SizeUtils.translateFontSizeToCode(24),
          width:this._width, textAlign:"center", height:SizeUtils.translateDesignHeightToCode(30),
          marginTop: SizeUtils.translateDesignHeightToCode(98)}}>{this._renderSystemNotice()}</Text>
        <Button
          backgroundColor="#db3132"
          disabled = {this.state.phoneNum == "" || this.state.password == ""}
          buttonStyle = {{height:SizeUtils.translateDesignHeightToCode(84),
            marginTop:SizeUtils.translateDesignHeightToCode(10), borderRadius:30}}
          textStyle={{fontSize: SizeUtils.translateFontSizeToCode(30)}}
          title = "登  录"
          onPress = {() => this._onPressLoginBtn()}
        />
        <Button
          backgroundColor="#ffffff"
          // disabled = {this.state.userNo == "" || this.state.password == ""}
          buttonStyle = {{height:SizeUtils.translateDesignHeightToCode(84),
            borderColor:"#db3132", borderWidth:SizeUtils.translateDesignNumToCode(3),
            marginTop:SizeUtils.translateDesignHeightToCode(40), borderRadius:30}}
          textStyle={{fontSize: SizeUtils.translateFontSizeToCode(30), color:"#db3132"}}
          title = "短信验证码登录"
          onPress = {() => this._onPressPhoneLoginBtn()}
        />
      </View>
    )
  }

  _onPressLoginBtn() {
    dismissKeyboard();
    if(this.state.phoneNum.length != 11) {
      this.setState({
        viewStatus: -901,
      })
      return;
    }
    new LoginSendAction().call(this, {type:Constants.LOGIN_TYPE.USER, phoneNum:this.state.phoneNum,
      password:this.state.password})
  }

  _onPressPhoneLoginBtn() {
    this.gotoPage(Config.pages.login_phone);
  }

  _renderPasser() {
    return(
      <TouchableOpacity style={{position:"absolute", bottom:SizeUtils.translateDesignHeightToCode(35)}} onPress={this._onPressPasser.bind(this)}>
        <Text style={{color:"#484a56", fontSize:SizeUtils.translateFontSizeToCode(28)}}>游客模式浏览
        </Text>
      </TouchableOpacity>
    )
  }

  _onPressPasser() {
    new LoginSendAction().call(this, {type:Constants.LOGIN_TYPE.VISITOR})
  }

  _renderSystemNotice() {
    let statusText = "";
    if(this.state.viewStatus == 1) {
      return "";
    }
    else if(this.state.viewStatus == 4) {
      statusText = "登录中";
    }
    else if(this.state.viewStatus == 5) {
      statusText = "登录成功";
    }
    else if(this.state.viewStatus == -901) {
      statusText = "手机号码长度不对";
    }
    else {
      statusText = this.state.statusText;
    }
    return statusText + " code:" + this.state.viewStatus;
  }
}
